iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 23
0
自我挑戰組

網頁學習日誌系列 第 23

SASS : @import 讓css模組化

  • 分享至 

  • xImage
  •  

把「變數」、「@mixin」等SASS都整理好後,就要來把他引入到HTML裡面了

首先要確認把檔案彙整到一個CSS檔案,HTML只要套用這個CSS就能使用所有的CSS,不用在一個個引入。

1.建立 all.scss ,並在html 連結「all.css 」

<link rel="stylesheet" type="text/css" href="css/all.css">

2.將要引入的scss檔案,檔案前方加上下底線「_ 」,如「_index.scss 」

https://ithelp.ithome.com.tw/upload/images/20200411/20107321Dhfzjq3mk3.png

3.在all.scss 填寫「 @import +’sass檔名’」指令,如下所示:

@import 'index';

儲存後,它會自動產生css資料夾,裡面只有一個all.css檔案,all.css裡面已經有「_index.css」的內容了

https://ithelp.ithome.com.tw/upload/images/20200411/20107321yueOgCxZWe.png

https://ithelp.ithome.com.tw/upload/images/20200411/201073211gs5G5ru7n.png

這表示成功讓all.css已經有內容了,現在以同樣的方法加入「_variable.scss」

1.把「_index.scss」的數值都改「變數」

https://ithelp.ithome.com.tw/upload/images/20200411/201073212rIdbf0Ajj.png

2.在all.scss 內容新增variable

https://ithelp.ithome.com.tw/upload/images/20200411/20107321w11wnBSVKT.png

這時,「all.scss」「_index.scss」兩個檔案儲存時,卻出現 prepros 錯誤訊息,而且不管是存哪個檔案都會出現!!

https://ithelp.ithome.com.tw/upload/images/20200411/2010732180fsTQSLGF.png

原因: @import的順序問題

如果 變數放在「 index」後面,檔案會先讀「 index」,可是裡面有變數,如上圖的$border-color,他無法辨識這是甚麼,自然不管存哪個檔案都會錯誤

解決方法:調整順序,網頁css檔案都排最後

未來@import 如變數、reset等都要依當時情形去排列順序,否則會無法編譯或是排版錯誤。

結果如下:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321TA5xOBHQp9.png

https://ithelp.ithome.com.tw/upload/images/20200411/20107321URV4OoIMBY.png


上一篇
SASS : @mixin 建立專屬語法資料庫
下一篇
API : 提升網站服務品質!!
系列文
網頁學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言